<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统安全配置</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <!-- 密码策略配置 -->
        <el-tab-pane label="密码策略" name="password">
          <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-width="200px"
          >
            <el-form-item label="密码最小长度" prop="minLength">
              <el-input-number v-model="passwordForm.minLength" :min="6" :max="32" />
              <div class="form-tip">密码长度必须不少于设定值，建议不低于8位</div>
            </el-form-item>
            
            <el-form-item label="密码复杂度要求" prop="complexity">
              <el-checkbox-group v-model="passwordForm.complexity">
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="number">必须包含数字</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
              <div class="form-tip">勾选的选项将作为密码设置和修改时的校验条件</div>
            </el-form-item>
            
            <el-form-item label="密码有效期(天)" prop="expirationDays">
              <el-input-number v-model="passwordForm.expirationDays" :min="0" :max="365" />
              <div class="form-tip">设置为0表示密码永不过期，建议设置为90天</div>
            </el-form-item>
            
            <el-form-item label="历史密码检查" prop="historyCheck">
              <el-input-number v-model="passwordForm.historyCheck" :min="0" :max="10" />
              <div class="form-tip">检查新密码与历史密码是否重复，0表示不检查</div>
            </el-form-item>
            
            <el-form-item label="密码错误锁定阈值" prop="lockThreshold">
              <el-input-number v-model="passwordForm.lockThreshold" :min="0" :max="10" />
              <div class="form-tip">连续输错密码达到设定值将锁定账户，0表示不锁定</div>
            </el-form-item>
            
            <el-form-item label="账户锁定时间(分钟)" prop="lockDuration">
              <el-input-number v-model="passwordForm.lockDuration" :min="1" :max="1440" />
              <div class="form-tip">账户锁定后，多长时间后自动解锁</div>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="savePasswordPolicy">保存设置</el-button>
              <el-button @click="resetPasswordForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 登录策略配置 -->
        <el-tab-pane label="登录策略" name="login">
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            label-width="200px"
          >
            <el-form-item label="启用验证码" prop="captchaEnabled">
              <el-switch
                v-model="loginForm.captchaEnabled"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，登录时需要输入验证码</div>
            </el-form-item>
            
            <el-form-item label="单用户登录限制" prop="singleLoginLimit">
              <el-select v-model="loginForm.singleLoginLimit" placeholder="请选择登录限制类型">
                <el-option label="不限制" value="none" />
                <el-option label="同一时间只能有一个用户登录" value="single" />
                <el-option label="同一类型设备只能登录一个" value="device" />
              </el-select>
              <div class="form-tip">限制用户同时在多处登录的策略</div>
            </el-form-item>
            
            <el-form-item label="登录IP限制" prop="ipLimit">
              <el-switch
                v-model="loginForm.ipLimit"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，用户只能从允许的IP地址登录</div>
            </el-form-item>
            
            <template v-if="loginForm.ipLimit === 1">
              <el-form-item label="IP白名单" prop="ipWhitelist">
                <el-input
                  v-model="loginForm.ipWhitelist"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入允许登录的IP地址，多个IP用英文逗号分隔"
                />
                <div class="form-tip">允许登录的IP地址列表，可使用IP段，如192.168.1.0/24</div>
              </el-form-item>
            </template>
            
            <el-form-item label="登录时间限制" prop="timeLimit">
              <el-switch
                v-model="loginForm.timeLimit"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，用户只能在指定时间段内登录</div>
            </el-form-item>
            
            <template v-if="loginForm.timeLimit === 1">
              <el-form-item label="允许登录时间段" prop="allowedTimeRange">
                <el-time-picker
                  v-model="loginForm.allowedTimeRange"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="HH:mm"
                />
                <div class="form-tip">允许用户登录的时间范围</div>
              </el-form-item>
              
              <el-form-item label="允许登录日期" prop="allowedDays">
                <el-checkbox-group v-model="loginForm.allowedDays">
                  <el-checkbox label="1">星期一</el-checkbox>
                  <el-checkbox label="2">星期二</el-checkbox>
                  <el-checkbox label="3">星期三</el-checkbox>
                  <el-checkbox label="4">星期四</el-checkbox>
                  <el-checkbox label="5">星期五</el-checkbox>
                  <el-checkbox label="6">星期六</el-checkbox>
                  <el-checkbox label="0">星期日</el-checkbox>
                </el-checkbox-group>
                <div class="form-tip">允许用户登录的日期</div>
              </el-form-item>
            </template>
            
            <el-form-item label="会话超时时间(分钟)" prop="sessionTimeout">
              <el-input-number v-model="loginForm.sessionTimeout" :min="1" :max="1440" />
              <div class="form-tip">用户无操作超过设定时间后自动退出登录</div>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveLoginPolicy">保存设置</el-button>
              <el-button @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 数据加密配置 -->
        <el-tab-pane label="数据加密" name="encryption">
          <el-form
            ref="encryptionFormRef"
            :model="encryptionForm"
            :rules="encryptionRules"
            label-width="200px"
          >
            <el-form-item label="API传输加密" prop="apiEncryption">
              <el-switch
                v-model="encryptionForm.apiEncryption"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，API请求和响应数据将进行加密传输</div>
            </el-form-item>
            
            <template v-if="encryptionForm.apiEncryption === 1">
              <el-form-item label="API加密算法" prop="apiAlgorithm">
                <el-select v-model="encryptionForm.apiAlgorithm" placeholder="请选择加密算法">
                  <el-option label="AES-CBC" value="aes-cbc" />
                  <el-option label="AES-GCM" value="aes-gcm" />
                  <el-option label="RSA" value="rsa" />
                </el-select>
                <div class="form-tip">API请求和响应数据加密使用的算法</div>
              </el-form-item>
            </template>
            
            <el-form-item label="敏感数据存储加密" prop="dataEncryption">
              <el-switch
                v-model="encryptionForm.dataEncryption"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，敏感数据将以加密形式存储在数据库中</div>
            </el-form-item>
            
            <template v-if="encryptionForm.dataEncryption === 1">
              <el-form-item label="数据加密算法" prop="dataAlgorithm">
                <el-select v-model="encryptionForm.dataAlgorithm" placeholder="请选择加密算法">
                  <el-option label="AES-256" value="aes-256" />
                  <el-option label="SM4" value="sm4" />
                </el-select>
                <div class="form-tip">数据库中敏感数据加密使用的算法</div>
              </el-form-item>
              
              <el-form-item label="加密密钥" prop="encryptionKey">
                <el-input v-model="encryptionForm.encryptionKey" show-password />
                <div class="form-tip">用于加密和解密数据的密钥，请妥善保管</div>
              </el-form-item>
              
              <el-form-item label="需要加密的字段" prop="encryptedFields">
                <el-select
                  v-model="encryptionForm.encryptedFields"
                  multiple
                  collapse-tags
                  placeholder="请选择需要加密的字段"
                >
                  <el-option label="用户手机号" value="mobile" />
                  <el-option label="用户邮箱" value="email" />
                  <el-option label="用户身份证号" value="idCard" />
                  <el-option label="用户银行卡号" value="bankCard" />
                  <el-option label="用户住址" value="address" />
                </el-select>
                <div class="form-tip">选择需要加密存储的敏感字段</div>
              </el-form-item>
            </template>
            
            <el-form-item label="数据库备份加密" prop="backupEncryption">
              <el-switch
                v-model="encryptionForm.backupEncryption"
                :active-value="1"
                :inactive-value="0"
              />
              <div class="form-tip">开启后，数据库备份文件将进行加密</div>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveEncryptionConfig">保存设置</el-button>
              <el-button @click="resetEncryptionForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 当前激活的选项卡
const activeTab = ref('password')

// 密码策略表单
const passwordFormRef = ref<FormInstance | null>(null)
const passwordForm = reactive({
  minLength: 8,
  complexity: ['lowercase', 'number'],
  expirationDays: 90,
  historyCheck: 3,
  lockThreshold: 5,
  lockDuration: 30
})

// 密码策略验证规则
const passwordRules = {
  minLength: [{ required: true, message: '请设置密码最小长度', trigger: 'blur' }],
  complexity: [{ type: 'array', required: true, message: '请至少选择一项密码复杂度要求', trigger: 'change' }],
  expirationDays: [{ required: true, message: '请设置密码有效期', trigger: 'blur' }],
  historyCheck: [{ required: true, message: '请设置历史密码检查数量', trigger: 'blur' }],
  lockThreshold: [{ required: true, message: '请设置密码错误锁定阈值', trigger: 'blur' }],
  lockDuration: [{ required: true, message: '请设置账户锁定时间', trigger: 'blur' }]
}

// 登录策略表单
const loginFormRef = ref<FormInstance | null>(null)
const loginForm = reactive({
  captchaEnabled: 1,
  singleLoginLimit: 'none',
  ipLimit: 0,
  ipWhitelist: '',
  timeLimit: 0,
  allowedTimeRange: [new Date(2000, 0, 1, 8, 0), new Date(2000, 0, 1, 18, 0)],
  allowedDays: ['1', '2', '3', '4', '5'],
  sessionTimeout: 30
})

// 登录策略验证规则
const loginRules = {
  captchaEnabled: [{ required: true, message: '请选择是否启用验证码', trigger: 'change' }],
  singleLoginLimit: [{ required: true, message: '请选择单用户登录限制类型', trigger: 'change' }],
  ipWhitelist: [{ required: true, message: '请输入IP白名单', trigger: 'blur' }],
  allowedDays: [{ type: 'array', required: true, message: '请至少选择一天允许登录', trigger: 'change' }],
  sessionTimeout: [{ required: true, message: '请设置会话超时时间', trigger: 'blur' }]
}

// 数据加密配置表单
const encryptionFormRef = ref<FormInstance | null>(null)
const encryptionForm = reactive({
  apiEncryption: 0,
  apiAlgorithm: 'aes-cbc',
  dataEncryption: 0,
  dataAlgorithm: 'aes-256',
  encryptionKey: '',
  encryptedFields: [],
  backupEncryption: 0
})

// 数据加密配置验证规则
const encryptionRules = {
  apiAlgorithm: [{ required: true, message: '请选择API加密算法', trigger: 'change' }],
  dataAlgorithm: [{ required: true, message: '请选择数据加密算法', trigger: 'change' }],
  encryptionKey: [{ required: true, message: '请输入加密密钥', trigger: 'blur' }],
  encryptedFields: [{ type: 'array', required: true, message: '请至少选择一个需要加密的字段', trigger: 'change' }]
}

// 加载配置数据
const loadConfigData = async () => {
  try {
    // 这里应该从API获取配置数据，此处使用模拟数据
    // 实际项目中替换为真实API调用
    // const res = await get('/api/system/security/config')
    
    // 模拟加载数据
    // ...实际项目中应该使用API返回的数据更新表单
  } catch (error) {
    console.error('加载安全配置数据失败:', error)
    ElMessage.error('加载安全配置数据失败')
  }
}

// 保存密码策略
const savePasswordPolicy = async () => {
  await post('/api/system/security/password', passwordForm)
  ElMessage.success('保存成功')
}

// 重置密码策略表单
const resetPasswordForm = () => {
  if (!passwordFormRef.value) return
  passwordFormRef.value.resetFields()
}

// 保存登录策略
const saveLoginPolicy = async () => {
  await post('/api/system/security/login', loginForm)
  ElMessage.success('保存成功')
}

// 重置登录策略表单
const resetLoginForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.resetFields()
}

// 保存数据加密配置
const saveEncryptionConfig = async () => {
  await post('/api/system/security/encryption', encryptionForm)
  ElMessage.success('保存成功')
}

// 重置数据加密配置表单
const resetEncryptionForm = () => {
  if (!encryptionFormRef.value) return
  encryptionFormRef.value.resetFields()
}

// 组件挂载时加载配置数据
onMounted(() => {
  loadConfigData()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}

:deep(.el-tabs__content) {
  padding: 20px 0;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 